<script>
//表格列配置
import BaseConfig from '../BaseConfig';
import * as ConfigEnum from '../config/config-enum';

export default {
  name: 'TableColumnConfig',
  mixins: [BaseConfig],
  data() {
    return {
      fontSize: 12, //字体大小
      textAlignTypes: ConfigEnum.TEXT_ALIGN_TYPE,
      textWeightTypes: ConfigEnum.TEXT_FONT_WEIGHT_TYPE,
      borderStyles: ConfigEnum.LINE_STYLE_TYPE,
    };
  },
  created() {
    this.fontSize = parseInt(this.chartOptions.settings.columnStyle.fontSize);
  },
  methods: {
    updateFontSize() {
      this.chartOptions.settings.columnStyle.fontSize = `${this.fontSize}px`;
      this.updateOptions();
    },
  },
};
</script>

<template>
  <div>
    <Row>
      <Col span="8">
      <span>表格列高度：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.settings.columnStyle.height"
        :min="5"
        @on-change="updateOptions"></InputNumber>
        </Col>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>表格列背景：</span>
      </Col>
      <Col span="16">
      <ColorPicker
        v-model="chartOptions.settings.columnStyle.backgroundColor"
        @on-change="updateOptions"></ColorPicker>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>字体大小：</span>
      </Col>
      <Col span="16">
      <InputNumber
        v-model="fontSize"
        :min="8"
        @on-change="updateFontSize"></InputNumber>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>字体粗细：</span>
        </Col>
      <Col span="16">
      <Select
        v-model="chartOptions.settings.columnStyle.fontWeight"
        @on-change="updateOptions">
        <Option
          v-for="item in textWeightTypes"
          :value="item.value"
          :key="item.value">{{ item.key }}</Option>
      </Select>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>字体颜色：</span>
      </Col>
      <Col span="16">
      <ColorPicker
        v-model="chartOptions.settings.columnStyle.color"
        @on-change="updateOptions"></ColorPicker>
      </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>文本对齐：</span>
        </Col>
      <Col span="16">
      <Select
        v-model="chartOptions.settings.columnStyle.textAlign"
        @on-change="updateOptions">
        <Option
          v-for="item in textAlignTypes"
          :value="item.value"
          :key="item.value">{{ item.key }}</Option>
      </Select>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>边框宽度：</span>
        </Col>
      <Col span="16">
      <InputNumber
        v-model="chartOptions.settings.columnStyle.borderWidth"
        :min="0"
        @on-change="updateOptions"></InputNumber>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>边框颜色：</span>
        </Col>
      <Col span="16">
      <ColorPicker
        v-model="chartOptions.settings.columnStyle.borderColor"
        @on-change="updateOptions"></ColorPicker>
      </Col>
        </Col>
    </Row>
    <Row>
      <Col span="8">
      <span>边框线型：</span>
        </Col>
      <Col span="16">
      <Select
        v-model="chartOptions.settings.columnStyle.borderStyle"
        @on-change="updateOptions">
        <Option
          v-for="item in borderStyles"
          :value="item.value"
          :key="item.value">{{ item.key }}</Option>
      </Select>
      </Col>
        </Col>
    </Row>
  </div>
</template>

<style>
</style>
